<template>
  <div id="cart">
    <nav-bar class="cart-nav">
      <div slot="middle">
        {{ cartTitle }}
      </div>
    </nav-bar>
    <scroll class="wrapper" ref="refScroll" :probe-type="3">
      <cart-list :cart_list="cartList" />
    </scroll>
    <cart-bottom-bar />
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import Scroll from 'components/common/scroll/Scroll'

import CartList from './comps/CartList'
import CartBottomBar from './comps/CartBottomBar'

export default {
  components: {
    NavBar,
    Scroll,

    CartList,
    CartBottomBar,
  },
  data() {
    return {}
  },
  computed: {
    cartTitle() {
      const length = this.$store.getters.cartListLength
      return '购物车（' + length + '）'
    },
    cartList() {
      return this.$store.state.cartList
    },
  },
  // 当购物车有了新的数据后，在这里刷新一下 scroll 为了可以在变化后的高度正常滚动
  activated() {
    this.$refs.refScroll.scrollRefresh()
  },
  methods: {},
}
</script>
<style lang="less" scoped>
#cart {
  background-color: #ffffff;
  .wrapper {
    height: calc(100vh - 137px);
    overflow: hidden;
    position: relative;
  }

  .cart-nav {
    background-color: @base-color;
    color: #ffffff;
    box-shadow: 0px 1px 1px #eeeeee;
  }
}
</style>
